<template>
  <dv-full-screen-container class="container">
    <!-- header -->
    <div class="module-box header">
      <div style="flex:0 1 30%">
        <dv-decoration-10 style="height: 17px;" />
      </div>
      <div style="flex:0 1 50%">
        <div class="module-box" style="height: 100%;padding-top: 10px;">
          <dv-decoration-8 style="flex:0 1 33%;" />
          <div style="flex:0 1 34%;">
            <dv-decoration-11 style="color:white">数据大屏</dv-decoration-11>
          </div>
          <dv-decoration-8 :reverse="true" style="flex:0 1 33%;" />
        </div>
      </div>
      <div style="flex:0 1 30%">
        <!-- 旋转180° -->
        <dv-decoration-10
          style="transform: rotateY(180deg);height: 17px;" />
      </div>
    </div>

    <!-- content -->
    <div class="module-box content">
      <div style="flex:0 1 15%" class="left">
        <dv-border-box-1 style="width:100%;height:100%">
          <div class="box">
            <div class="box-center">
              <ul class="infinite-list" v-infinite-scroll="load"
                :infinite-scroll-distance='1' style="overflow:auto">
                <li v-for="i in count" class="infinite-list-item">{{ i }}
                </li>
              </ul>
            </div>
          </div>

        </dv-border-box-1>
      </div>
      <div style="flex:0 1 85%">
        <dv-border-box-8 style="width:100%;height:100%;padding:5px;">
          <MapEcharts />
          <!-- <MapGaoDe /> -->
        </dv-border-box-8>
      </div>
    </div>

    <!-- footer -->

    <div class="module-box footer">
      <div style="flex:0 1 50%">
        <dv-border-box-12>
          <dv-water-level-pond :config="config1" style="height:100%" />
        </dv-border-box-12>
      </div>
      <div style="flex:0 1 50%">
        <dv-border-box-12>
          <dv-capsule-chart :config="config2" style="height:100%" />
        </dv-border-box-12>
      </div>
    </div>

  </dv-full-screen-container>
</template>

<script>
import MapEcharts from '@/views/map/MapEcharts.vue';
import MapGaoDe from '@/views/map/MapGaoDe.vue';
import EchartDemo1 from '@/components/echart/EchartDemo1.vue';
export default {
  components: { MapEcharts, MapGaoDe, EchartDemo1 },
  data() {
    return {
      count: 0,
      config1: {
        data: [66, 45],
        shape: 'roundRect',
      },
      config2: {
        data: [
          {
            name: '南阳',
            value: 167,
          },
          {
            name: '周口',
            value: 123,
          },
          {
            name: '漯河',
            value: 98,
          },
          {
            name: '郑州',
            value: 75,
          },
          {
            name: '西峡',
            value: 66,
          },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '单位',
      },
    };
  },
  methods: {
    // 触发无限滚动
    load() {
      console.log('触发load');
      this.count += 2;
    },
  },
};
</script>

<style lang="scss" scoped>
$big-screen-header-height: 60px;
$big-screen-footer-height: 120px;

//大页面div样式
.container {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(
    to right top,
    rgb(4, 5, 95),
    rgb(26, 44, 150),
    rgb(4, 5, 95)
  );

  // 基础样式
  .module-box {
    display: flex;
  }

  // header样式
  .header {
    height: $big-screen-header-height;
  }

  // 内容部分样式
  .content {
    height: calc(100vh - $big-screen-header-height - $big-screen-footer-height);
    //内容区左侧div样式
    .left {
      .box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

        //左侧列表样式
        .box-center {
          width: 85%;
          height: 90%;
          // 无线滚动样式
          .infinite-list {
            overflow: auto;
            height: 100%;

            .infinite-list-item {
              display: flex;
              align-items: center;
              justify-content: center;
              height: 30px;
              background: #e8f3fe;
              margin: 10px;
              color: #7dbcfc;
              border-radius: 50px;
            }
          }
        }
      }
    }
  }

  //footer样式
  .footer {
    height: $big-screen-footer-height;
  }
}
</style>